<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Geometry第二个three</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <!-- <script src="../three.js-r148/build/three.js"></script> -->
    <!-- <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.152.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm"
            }
        }
    </script> -->

    <!-- <script src="./three.js"></script> -->
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
    <script type="module">
        // import * as THREE from '../three.js-r148/build/three.module.js';
        // const THREE = window.THREE || require('https://unpkg.com/three@0.155.0/build/three.module.js');
        // import * as THREE from 'https://unpkg.com/three/build/three.module.js';
        // import * as THREE from 'three';
        import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
        // 鼠标键盘监听事件
        // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
        // import { OrbitControls } from '../three.js-r148/examples/jsm/controls/OrbitControls.js';
        console.log(THREE);
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        //类型数组创建顶点数据(原点为中心点)
        var vertices = new Float32Array([
            -50, -50, 50,
            50, -50, 50,
            50, 50, 50,
            -50, 50, 50,
            -50, -50, -50,
            50, -50, -50,
            50, 50, -50,
            -50, 50, -50,
        ])
        // 正方体的8个顶点(原点为起点)
        // var vertices = new Float32Array([
        //     // 前面
        //     0, 0, 100,
        //     100, 0, 100,
        //     100, 100, 100,
        //     0, 100, 100,
        //     // 后面
        //     0, 0, 0,
        //     100, 0, 0,
        //     100, 100, 0,
        //     0, 100, 0,
        // ]);
        // 正方体的36个顶点索引（12个面，每个面4个顶点）
        var indices = new Uint16Array([
            // 前面
            0, 1, 2,
            2, 3, 0,
            // 右面
            1, 5, 6,
            6, 2, 1,
            // 后面
            5, 4, 7,
            7, 6, 5,
            // 左面
            4, 0, 3,
            3, 7, 4,
            // 上面
            3, 2, 6,
            6, 7, 3,
            // 下面
            4, 5, 1,
            1, 0, 4,
        ]);
        // 创建缓冲区几何体
        var geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
        geometry.setIndex(new THREE.BufferAttribute(indices, 1));

        // var geometry = new THREE.BufferGeometry();
        // // 创建属性缓冲区对象
        // var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
        // // 设置几何体attributes属性的位置属性
        // geometry.attributes.position = attribue;
        //类型数组创建顶点颜色color数据
        var colors = new Float32Array([
            1, 0, 0, //顶点1颜色
            0, 1, 0, //顶点2颜色
            0, 0, 1, //顶点3颜色

            1, 1, 0, //顶点4颜色
            0, 1, 1, //顶点5颜色
            1, 0, 1, //顶点6颜色
        ]);
        // 设置几何体attributes属性的颜色color属性
        geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
        var normals = new Float32Array([
            1, 0, 0, //顶点1法向量
            0, 1, 0, //顶点2法向量
            0, 0, 1, //顶点3法向量

            0, 0, 1, //顶点4法向量
            0, 1, 0, //顶点5法向量
            1, 0, 0, //顶点6法向量
        ]);
        // 设置几何体attributes属性的位置normal属性
        geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据
        // 材质对象Material
        // 三角面(网格)渲染模式
        // 三角面(网格)渲染模式
        var material = new THREE.MeshBasicMaterial({
            // color: 0x00ff00,
            vertexColors: THREE.VertexColors, //以顶点颜色为准
            wireframe: false,
        });
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中

        // var material = new THREE.PointsMaterial({
        //     // color: 0xff0000,
        //     vertexColors: THREE.VertexColors, //以顶点颜色为准
        //     size: 10.0 //点对象像素尺寸
        // }); //材质对象
        // var points = new THREE.Points(geometry, material); //点模型对象
        // scene.add(points); //网格模型添加到场景中

        // 线条渲染模式
        // var material=new THREE.LineBasicMaterial({
        //     // color:0xff0000, //线条颜色
        //     vertexColors: THREE.VertexColors, //以顶点颜色为准
        // });//材质对象
        // var line=new THREE.Line(geometry,material);//线条模型对象
        // // 圆点为中心点设置偏移值
        // // line.position.set(50, 50, 50);//设置mesh3模型对象的xyz坐标为120,0,0
        // scene.add(line); //网格模型添加到场景中

        /**
         * 光源设置
         */
        //点光源
        var point1 = new THREE.PointLight(0xffffff, 1, 0, 10);
        point1.position.set(500, 500, 500); //点光源位置
        scene.add(point1); //点光源添加到场景中

        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(400, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0x333333, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        //执行渲染操作   指定场景、相机作为参数
        // renderer.render(scene, camera);

        // 创建并添加AxisHelper到场景中
        var axisHelper = new THREE.AxisHelper(250); // 250是AxisHelper的大小
        scene.add(axisHelper);


        // 自执行动画，添加每次动画的时间差值，使物体旋转速度与时间间隔相关（匀速动画）
        let T0 = new Date(); // 上次时间
        function render() {
            let T1 = new Date(); //本次时间
            let t = T1 - T0; //时间差
            T0 = T1; //把本次时间赋值给上次时间
            mesh.rotateY(0.001*t)
            mesh.rotateX(0.001*t)
            // mesh.rotateZ(0.001*t)
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }

        // 鼠标键盘操控动画
        // function render() {
        //     renderer.render(scene, camera);
        //     requestAnimationFrame(render);
        // }

        render();

        var controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
        // controls.addEventListener('change', render); //监听鼠标、键盘事件
    </script>
</body>

</html>